<template>
	<view class="specsContain">
		<block v-for="(item,index) in specs" :key='index'>
			<view class="spcTitle">
				{{item.catName}}
			</view>
			<view class="specContent">
				<view class="specItem" v-for="(spec,idx) in item.items" :key='idx' @click="clickItem(item,index,idx)">
					<image src="../../static/images/Select.png" v-if="spec.select" class="selectPic"></image>
					<image :src="spec.itemImg" v-if="spec.itemImg" class="specImg"></image>
					<view class="itemtext">
						{{spec.itemName}}
					</view>
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	export default {
		props: {
			specs: Array,
			actives: Array
		},
		data() {
			return {
				currentActives: [],
				specArr:[]
			};
		},
		watch:{
			actives(val){
				this.currentActives=val
			}
			
		},
		methods: {
			clickItem(item, index, idx) {
				
				let currObj={level:index,id:item.items[idx].itemId}
				this.$emit('commitSelect',currObj)
			}
		}
	}
</script>

<style lang="scss">
	.specsContain {
		padding: 26rpx;
		margin-top: 10rpx;
		background-color: #fff;

		.spcTitle {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 10rpx;
			font-size: $uni-font-size-lg;
		}

		.specContent {
			padding: 26rpx;
			display: flex;
			flex-wrap: wrap;

			.specItem {
				padding: 20rpx 26rpx;
				position: relative;
				margin: 10rpx 20rpx;
				border-radius: 8rpx;
				text-align: center;

				.selectPic {
					position: absolute;
					top: -20rpx;
					right: -26rpx;
					width: 30rpx;
					height: 30rpx;
					border-top-right-radius: 8rpx;
				}

				.specImg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
				}

				.itemtext {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
					@include textCenter(30rpx);
				}
			}
		}
	}
</style>
